<html>
<head><title>My Test Extension Options</title></head>
<script type="text/javascript">

// Saves options to localStorage.
function save_options() {
  var notification_time = document.getElementById("notification_time").value;
  var time_error = document.getElementById("time_error");
  
  try {
	notification_time = parseInt(notification_time);
	time_error.innerHTML = "";
  }catch (err) {
	notification_time = 10;
	time_error.innerHTML = "Wrong number format";
  }
  localStorage.notification_time = notification_time;
  
  
  if (document.getElementById("grade").checked) {
	localStorage.setItem("grade_notification", "1");
  } else {
	localStorage.removeItem("grade_notification");
  }
 
  if (document.getElementById("notification").checked) {
	localStorage.notification_notification = "1";
  } else {
	localStorage.removeItem("notification_notification");
  }
  
  if (document.getElementById("broadcast").checked) {
	localStorage.broadcast_notification = "1";
  } else {
	localStorage.removeItem("broadcast_notification");
  }
  var selectPoll = document.getElementById("poll");
  localStorage.polling_time = selectPoll[selectPoll.selectedIndex].value;
  bgPage = chrome.extension.getViews()[0];
  bgPage.settings = {
	"pollingTime" : parseInt(localStorage.polling_time, 10) * 1000,
	"notificationTime" : parseInt(localStorage.notification_time, 10) * 1000,
	"gradeNotification": localStorage.grade_notification,
	"notificationNotification": localStorage.notification_notification,
	"broadcastNotification": localStorage.broadcast_notification
  }
  // Update status to let user know options were saved.
  var status = document.getElementById("status");
  status.innerHTML = "Options Saved.";
  setTimeout(function() {
    status.innerHTML = "";
  }, 2000);
}

// Restores select box state to saved value from localStorage.
function restore_options() {
  var notification_time = localStorage.notification_time;
  if (!notification_time) {
    notification_time = 10;
  }
  document.getElementById("notification_time").value = notification_time;
  
  document.getElementById("grade").checked = localStorage.grade_notification;
  document.getElementById("notification").checked = localStorage.notification_notification;
  document.getElementById("broadcast").checked = localStorage.broadcast_notification;
  
  var pollingTime = localStorage.polling_time;
  var select = document.getElementById("poll");
  for (var i = 0; i < select.children.length; i++) {
    var child = select.children[i];
    if (child.value == pollingTime) {
      child.selected = "true";
      break;
    }
  }
  
}

</script>

<body onload="restore_options()">
<label id="status"></label>
<div id="desktop_notifications_choices">
	<label for="grade" style="padding-right:40px">Show Grade Desktop Notification</label> <input type="checkbox" id="grade" />
	<br />
	<label for="notification" style="padding-right:8px">Show Notification Desktop Notification</label> <input type="checkbox" id="notification" />
	<br />
	<label for="broadcast" style="padding-right:16px">Show Broadcast Desktop Notification</label> <input type="checkbox" id="broadcast" />
	<br />
</div>
<div id="desktop_notification_time">
	<br />
	<br />
	<label for="notification_time" style="padding-right:8px">Choose Desktop Notification display time</label> <input type="text" id="notification_time" style="padding-right:8px"/> <label id="time_error"></label>
</div>
<div id="polling_interval_choices">
<label for="poll">Polling interval</label>
	<select id="poll">
		<option id="poll_15000" value="15">15 seconds</option>
		<option id="poll_30000" value="30">30 seconds</option>
		<option id="poll_60000" value="60">1 minute</option>
		<option id="poll_300000" value="300">5 minutes</option>
		<option id="poll_600000" value="600">10 minutes</option>
		<option id="poll_900000" value="900">15 minutes</option>
    </select>
</div>
<br>
<button onclick="save_options()">Save</button>
</body>
</html>